{% extends "shuup/admin/base.jinja" %}
{% from "shuup/admin/macros/general.jinja" import content_block %}

{% macro address_form(form) %}
    {% for field in form %}
    {{ bs3.field(field) }}
    {% endfor %}
{% endmacro %}

{% block content %}
    <div class="container-fluid">
        <div class="content-block">
            <div class="row">
                <div class="pb-4 col-xl-12">
                    <label>
                        <input id="billing-to-shipping" type="checkbox">
                        {% trans %}Use billing address as shipping address{% endtrans %}
                    </label>
                </div>
            </div>
            <form method="post" action="" id="edit-addresses">
                <div class="row order-addresses">
                    {% csrf_token %}
                    <div class="col-lg-6 billing-address">
                        <h4 class="underline"><i class="fa fa-file-text"></i> {% trans %}Billing Address{% endtrans %}</h4>
                        {{ address_form(form["billing_address"]) }}
                    </div>
                    <div class="col-lg-6 shipping-address">
                        <h4 class="underline"><i class="fa fa-truck"></i> {% trans %}Shipping Address{% endtrans %}</h4>
                        {{ address_form(form["shipping_address"]) }}
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    $(function(){
        var shouldCopyFields = false;
        function toggleAndCopyFields() {
            shouldCopyFields = $("#billing-to-shipping").is(":checked");
            if (shouldCopyFields) {
                // copy all billing fields values to shipping fields
                $(".billing-address :input").each(function (index, element) {
                    copyFieldValue(this);
                });
            }
            $(".shipping-address :input")
                .attr("readonly", shouldCopyFields)
                .toggleClass("disabled", shouldCopyFields)
                .trigger("change");
            // copy all billing fields values to shipping fields AGAIN
            // this is required when region app is enabled
            // as we can't guarantee the order fields are copied.
            // the region code could be copied before the country and when country
            // is changed, the region code field can be replaced by a select and
            // have options created. this way, we should copy values
            // before the `change` event trigged above and once again after
            // all fields get changed
            if (shouldCopyFields) {
                $(".billing-address :input").each(function (index, element) {
                    copyFieldValue(this);
                });
            }
        }
        function copyFieldValue(element) {
            if(!shouldCopyFields || !element)
                return;
            var targetName = $(element).attr("id").split("-")[1];
            var $target = $("#id_shipping_address-" + targetName);
            $target.val(element.value);
            $target.trigger("change");
        }
        function activateCheckoutAddressCopy() {
            $("#id_shipping-country").attr("readonly", true);
            toggleAndCopyFields();
            $("#billing :input").on("input change", function (evt) {
                copyFieldValue(evt.target);
            });
            $("#billing-to-shipping").on("change", toggleAndCopyFields);
        }
        activateCheckoutAddressCopy();
        // we detectec that a field could be replaced by any other input
        // in cases like regions module is injected
        // this way, we must attach the event again
        document.addEventListener("regionFieldInitialized", function (evt) {
            if ($(evt.detail.field).attr("name").indexOf("billing") >= 0) {
                $(evt.detail.field).on("input change", function (evt) {
                    copyFieldValue(evt.target)
                });
            }
        });
    });
</script>
{% endblock %}

